<!DOCTYPE html>
<html>
<head>
    <title>Pattern Animation</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let shapes = [];
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        class Shape {
            constructor(x, y, size, color, speedX, speedY, type) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.color = color;
                this.speedX = speedX;
                this.speedY = speedY;
                this.type = type;
            }
            
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
            }
            
            draw() {
                ctx.beginPath();
                
                if (this.type === 'triangle') {
                    ctx.moveTo(this.x, this.y - this.size / 2);
                    ctx.lineTo(this.x + this.size / 2, this.y + this.size / 2);
                    ctx.lineTo(this.x - this.size / 2, this.y + this.size / 2);
                } else if (this.type === 'sanJiao') {
                    ctx.moveTo(this.x, this.y - this.size / 2 );
                    ctx.lineTo(this.x + this.size, this.y );
                    ctx.lineTo(this.x + this.size , this.y - this.size );
                }else if (this.type === 'rectangle') {
                    ctx.rect(this.x - this.size / 2, this.y - this.size / 2, this.size, this.size / 2);
                } else if (this.type === 'irregular') {
                    ctx.moveTo(this.x, this.y - this.size / 2);
                    ctx.lineTo(this.x + this.size / 2, this.y + this.size / 4);
                    ctx.lineTo(this.x + this.size / 4, this.y + this.size / 2);
                    ctx.lineTo(this.x - this.size / 4, this.y + this.size / 2);
                    ctx.lineTo(this.x - this.size / 2, this.y + this.size / 4);
                } else if (this.type === 'hexagon') {
                    const angle = Math.PI / 3;
                    for (let i = 0; i < 6; i++) {
                        const xPos = this.x + this.size * Math.cos(i * angle);
                        const yPos = this.y + this.size * Math.sin(i * angle);
                        if (i === 0) {
                            ctx.moveTo(xPos, yPos);
                        } else {
                            ctx.lineTo(xPos, yPos);
                        }
                    }
                } else if (this.type === 'circle') {
                    ctx.arc(this.x, this.y, this.size / 2, 0, Math.PI * 2);
                } else if (this.type === 'star') {
                    const spikes = 5;
                    const outerRadius = this.size / 2;
                    const innerRadius = outerRadius / 2;
                    const rotation = Math.PI / 2 * 3;
                    const step = Math.PI / spikes;
                    
                    ctx.moveTo(this.x, this.y - outerRadius);
                    for (let i = 0; i < spikes; i++) {
                        const xOuter = this.x + Math.cos(rotation + step * i) * outerRadius;
                        const yOuter = this.y + Math.sin(rotation + step * i) * outerRadius;
                        ctx.lineTo(xOuter, yOuter);
                        
                        const xInner = this.x + Math.cos(rotation + step * i + step / 2) * innerRadius;
                        const yInner = this.y + Math.sin(rotation + step * i + step / 2) * innerRadius;
                        ctx.lineTo(xInner, yInner);
                    }
                } else if (this.type === 'heart') {
                    const x = this.x;
                    const y = this.y;
                    const width = this.size;
                    const height = this.size;
                    
                    ctx.moveTo(x, y + height / 4);
                    ctx.quadraticCurveTo(x, y, x + width / 4, y);
                    ctx.quadraticCurveTo(x + width / 2, y, x + width / 2, y + height / 4);
                    ctx.quadraticCurveTo(x + width / 2, y, x + width * 3 / 4, y);
                    ctx.quadraticCurveTo(x + width, y, x + width, y +                    width / 4, y + height / 4);
                    ctx.closePath();
                } else if (this.type === 'diamond') {
                    ctx.moveTo(this.x, this.y - this.size / 2);
                    ctx.lineTo(this.x + this.size / 2, this.y);
                    ctx.lineTo(this.x, this.y + this.size / 2);
                    ctx.lineTo(this.x - this.size / 2, this.y);
                    ctx.closePath();
                }
                
                ctx.closePath();
                ctx.strokeStyle = this.color;
                ctx.lineWidth = 2;
                ctx.stroke();
            }
        }
        
        function createShapes() {
            const colors = ['#87CEFA', '#00BFFF', '#1E90FF', '#4169E1', '#0000FF','#e81919'];
            const types = ['sanJiao','triangle', 'rectangle', 'irregular', 'hexagon', 'circle', 'star', 'heart', 'diamond'];

            for (let i = 0; i < 25; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 50 + 20;
                const speedX = Math.random() * 0.5 - 0.25;
                const speedY = Math.random() * 0.5 - 0.25;
                const color = colors[Math.floor(Math.random() * colors.length)];
                const type = types[Math.floor(Math.random() * types.length)];
                shapes.push(new Shape(x, y, size, color, speedX, speedY, type));
            }
        }
        
        function animateShapes() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let i = 0; i < shapes.length; i++) {

                shapes[i].update();
                shapes[i].draw();
            }
            // 浏览自动重画
            requestAnimationFrame(animateShapes);
        }
        
        createShapes();
        animateShapes();
    </script>
</body>
</html>


